<template>
  <div style="overflow: hidden">
    <div style="display: flex; flex-wrap: wrap; align-items: center; width: 100%; margin: -2px">
      <div
        v-for="item of colors"
        :key="item"
        :style="{ background: item || '#fff', border: `${modelValue === item ? '2px solid #f00' : '1px solid #000'}` }"
        style="flex: none; box-sizing: border-box; width: 14px; height: 14px; margin: 2px; cursor: pointer"
        @click="() => $emit('update:modelValue', item)"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zl-colors',
  props: {
    modelValue: { type: String, default: '' },
    colors: {
      type: Array,
      default: () => ['#f2827b', '#c88c08', '#0051a0', '#2499cf', '#15a6a3', '#5b9309', '#4933c1', ''],
    },
  },
};
</script>

<style scoped></style>
